<template>
    <div class="info-collect">
        <Crumb name="Sparepart Request"></Crumb>
        <div class="content">
            <Search>
                <el-input
                        v-model="key"
                        size="small"
                        class="input"
                        placeholder="Search By Request No"
                        prefix-icon="el-icon-search"
                ></el-input>
                <el-button
                        size="small"
                        type="primary"
                >Search
                </el-button>
            </Search>
            <div class="table-wrapper">
                <el-table
                        :data="approvedList"
                        border
                        row-key="id"
                        @expand-change="getDetail"
                        stripe
                        style="width: 100%">
                    <el-table-column type="expand">
                        <template slot-scope="props">
                            <el-table  :data="props.row.partList" border>
                                <el-table-column
                                        prop="partsNumber"
                                        label="Part No"
                                        width="180">
                                </el-table-column>
                                <el-table-column
                                        prop="denomination"
                                        label="Description"
                                >
                                </el-table-column>
                                <el-table-column
                                        prop="quantity"
                                        label="Qty"
                                >
                                </el-table-column>

                                <el-table-column
                                        prop="stockQuantity"
                                        label="stock remaining"
                                        width="150">
                                </el-table-column>
                            </el-table>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="requestNo"
                            label="Request No"
                            width="180"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="requestDate"
                            label="requestDate"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="requestBy"
                            label="Request By"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="customer"
                            label="Customer"
                            >
                    </el-table-column>
                    <el-table-column
                            prop="purpose"
                            label="purpose"
                            width="150"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="approveBy"
                            label="Approve By"
                            width="150"
                    >
                    </el-table-column>
                    <el-table-column label="Opr">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="openEdit(scope.row)">PO
                            </el-button>

                        </template>
                    </el-table-column>
                </el-table>

                <div class="page">
                    <el-pagination background
                                   :page-size="pageSize"
                                   @current-change="changePage"
                                   layout="prev, pager, next"
                                   :total="total"></el-pagination>
                </div>
            </div>

            <div class="modal-wrapper">
                <el-dialog
                        title="Sparepart Purchase"
                        :visible.sync="dialogVisible"
                        width="80%"
                        top="100px"
                >
                    <el-form  :model="ruleForm"  ref="ruleForm" label-width="200px" class="demo-ruleForm" :inline="true">
                        <el-form-item label="Request No :" prop="requestNo" size="medium">
                            <span class="desc">{{ruleForm.requestNo}}</span>
                        </el-form-item>
                        <el-form-item label="Request Date :" prop="requestDate">
                            <span class="desc">{{ruleForm.requestDate}}</span>
                        </el-form-item>
                        <el-form-item label="Request By :" prop="requestBy">
                           <span class="desc">{{ruleForm.requestBy}}</span>
                        </el-form-item>
                        <el-form-item label="Customer :" prop="customerName">
                           <span class="desc">{{ruleForm.customer}}</span>
                        </el-form-item>
                        <el-form-item label="Purpose :" prop="purpose">
                            <span class="desc">{{ruleForm.purpose}}</span>
                        </el-form-item>
                        <el-form-item label="Approved By :" prop="approvedBy">
                            <span class="desc">{{ruleForm.approveBy}}</span>
                        </el-form-item>
                        <el-form-item label="Status :" prop="status">
                            <span class="desc">{{ruleForm.status}}</span>
                        </el-form-item>
                    </el-form>
                    <div class="items">
                        <span>items</span>
                        <div class="table">
                            <el-table
                                    :data="partList"
                                    border
                                    stripe
                                    style="width: 100%">
                                <el-table-column
                                        type="index"
                                        prop="no"
                                        label="No"
                                        width="180"
                                >
                                </el-table-column>
                                <el-table-column
                                        prop="partsNumber"
                                        label="Part No"
                                        width="180">
                                </el-table-column>
                                <el-table-column
                                        prop="denomination"
                                        label="Description"
                                        width="320">
                                </el-table-column>
                                <el-table-column label="Qty" width="180" prop="quantity">
                                </el-table-column>
                                <el-table-column label="Price" width="200">
                                    <template slot-scope="scope">
                                        <el-input v-if="ruleForm.status !== 'Poed'" size="mini" v-model="scope.row.purchasePrice"/>
                                        <span v-else>{{scope.row.purchasePrice}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="Total Price">
                                    <template slot-scope="scope">
                                        {{scope.row.purchasePrice * scope.row.quantity}}
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        prop="stockQuantity"
                                        label="stock remaining"
                                        width="150">
                                </el-table-column>
                                <el-table-column label="operate" width="200">
                                    <template slot-scope="scope">
                                        <el-button  v-if="ruleForm.status !== 'Poed'" size="small" type="primary" @click="showVendor(scope.row.id)">
                                            <span v-if="scope.row.vendor">{{scope.row.vendor.englishName}}</span>
                                            <span v-else>Choose Vendor</span>
                                        </el-button>
                                        <span v-else>{{scope.row.vendor.englishName}}</span>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>

                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">Cancel</el-button>
                        <el-button type="warning" @click="saveForm" v-show="ruleForm.status !== 'Poed'">Save</el-button>
                        <el-button type="primary" @click="submitForm" v-show="ruleForm.status !== 'Poed'">Confirm</el-button>
                    </span>
                </el-dialog>
                <Vendor :visible="vendorShow"
                        @close="close"
                        @select="select"> </Vendor>

            </div>

        </div>
    </div>
</template>

<script>
    import Crumb from '@/components/common/crumb'
    import Search from '@/components/common/search'
    import Vendor from '@/components/part/vender'
    import {ERROR_OK} from "../../util/config";
    import mixins from '../../util/mixins'
    import {getApprovedRequestList,getPartPurchaseRequestDetail,comfirmPurchaseQuest,savePurchaseQuest} from "../../api/purchase";

    export default {
        name: "info-collect",
        mixins:[mixins],
        data() {
            return {
                vendorShow:false,
                partList:[],
                list: [],
                ruleForm: {},
                key: '',
                itemId:'',
                dialogVisible: false
            }
        },
        computed:{
            approvedList(){
               return this.list.filter(item=>item.requestNo.indexOf(this.key)>-1).slice((this.pageNum-1) * this.pageSize,this.pageNum*this.pageSize)
            }
        },
        created(){
            this._getApprovedList();
        },
        methods: {
            async getDetail(r){
                if(r.partList){
                    this.partList = r.partList;
                } else {
                    let {status,data} = await getPartPurchaseRequestDetail(r.id);
                    if(status === ERROR_OK){
                        let partList = data.spareRequestDetailVoList.map(item=>{
                            return {
                                ...item.spareParts,quantity:item.quantity,stockQuantity:item.stockQuantity,purchasePrice:item.purchasePrice,pId:item.id,vendor:item.supplier
                            }
                        });
                        r.partList = partList;
                        const index = this.list.findIndex(item=>item.id===r.id);
                        this.list.splice(index,1,r);
                        this.partList = partList;
                        // this.$set(r,'partList',partList)
                    }
                }
                this.ruleForm.requestNo = r.requestNo;
                this.ruleForm.requestDate = r.requestDate;
                this.ruleForm.requestBy = r.requestBy;
                this.ruleForm.customer = r.customer;
                this.ruleForm.purpose = r.purpose;
                this.ruleForm.status = r.status;
                this.ruleForm.approveBy = r.approveBy;
                this.id = r.id;
            },
            async _getApprovedList(){
                let {status,data} = await getApprovedRequestList();
                if(status === ERROR_OK) {
                    this.list = data;
                    this.total = data.length
                }
            },
            close(){
                this.vendorShow = false
            },
            select(r){
                const target = this.partList.find(item=>item.id === this.itemId);
                this.$set(target,'vendor',r);
                this.vendorShow = false;
            },
            showVendor(id){
                this.itemId = id;
                this.vendorShow = true
            },
            async submitForm() {
                let flag = true;
                this.partList.forEach(item=>{
                    if(!item.vendor){
                        flag=false;
                        return false
                    }
                });
                if(!flag){
                    return
                }
                let list = this.partList.length ? this.partList.map(item=>{
                    return {
                        partId:item.id,
                        quantity:item.quantity,
                        purchasePrice:item.purchasePrice,
                        supplierId:item.vendor.id,
                        id:item.pId
                    }
                }) : [];
                list = JSON.stringify(list);
                        let {status} = await comfirmPurchaseQuest({ id:this.id,requestDetail:list });
                        if (status === ERROR_OK) {
                            this.$message({
                                message:"Confirm Successfully",
                                type:'success'
                            })
                        }
                        this.dialogVisible = false;
                        this._getApprovedList();
                        this.clear();
            },
            async saveForm(){
                let flag = true;
                this.partList.forEach(item=>{
                    if(!item.vendor){
                        flag=false;
                        return false
                    }
                });
                if(!flag){
                    return
                }
                let list = this.partList.length ? this.partList.map(item=>{
                    return {
                        partId:item.id,
                        quantity:item.quantity,
                        purchasePrice:item.purchasePrice,
                        supplierId:item.vendor.id,
                        id:item.pId
                    }
                }) : [];
                list = JSON.stringify(list);
                let {status} = await savePurchaseQuest({ id:this.id,requestDetail:list });
                if (status === ERROR_OK) {
                    this.$message({
                        message:"Save Successfully",
                        type:'success'
                    })
                }
                this.dialogVisible = false;
                this._getApprovedList();
                this.clear();
            },
            clear() {
                this.reason = ''
            },
            openAdd() {
                this.clear();
                this.dialogVisible = true
            },
            openEdit(r) {
                this.getDetail(r);
                this.dialogVisible = true

            },
        },
       watch:{
           key(key){
               this.total = this.list.filter(item=>item.requestNo.indexOf(key)>-1).length
           },
       },
        components: {
            Crumb, Search,Vendor
        }
    }
</script>

<style scoped lang="scss">
    @import "../../css/mixins";
    .content {
        @include content
    }
    .modal-wrapper{
        .el-form-item__label{
            font-size: 18px;
            font-weight: 800;
        }
        .desc{
            display: inline-block;
            width: 120px;
            vertical-align: top;
            overflow: hidden;
        }
    }
    .demo-table-expand {
        font-size: 0;
    }

    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }

    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>